<template>
	<view class="content">
		<uni-nav-bar  color="white" :fixed="true" left-icon="left" @clickLeft="back" :background-color="navColor" status-bar :border="false">

				<view class="top">
					历史
				</view>
		</uni-nav-bar>
		<view v-if="listall.length==0" class="emptybody">
			<image class="empty" src="../../static/empty.png"></image>
		    <text class="txt">这里空空如也～</text>
		</view>
		<scroll-view v-else class="body body_no" :refresher-enabled="true" :refresher-triggered="triggered" 
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" :scroll-y="true" @scrolltolower="getplanning()">
			<view class="b_2">
				<block  v-for="item in listall">
					<view class="item"  >
						<view class="hd">
							<view class="title">{{item.title}}</view>
							<view class="type">{{item.eventCategoryName}}</view>
						</view>
						<view class="time">{{item.startDate?item.startDate.replace(/-/g,'.'):''}}-{{item.endDate?item.endDate.replace(/-/g,'.'):''}}</view>
						<view class="des">
							<image src="../../static/icon/depart.png" mode="aspectFit" class="icon"></image>
							<text>{{item.deptTotal}} 个部门</text>
							<image mode="aspectFit" class="icon" src="../../static/icon/product.png"></image>
							<text>{{item.productTotal}} 个产品</text>
						</view>
						<view class="progress">
							<image mode="aspectFit" class="icon" src="../../static/icon/progress.png"></image>
							<text>指标完成进度</text><text>{{item.metricCompleteCount}}/{{item.metricTotal}}</text>
						</view>
						<view class="divide"></view>
						<view class="bottom">
							<colorfulprogress :readonly="true" :progress="item.progressValue"></colorfulprogress>
							<view  class="detail" @tap="detail(item.id)">查看详情</view>

						</view>
					</view>
				</block>
				</view>
		</scroll-view>
	
	</view>
</template>

<script>
	import helper from "../../utils/helper";
	import { agingApi as agingApi } from "../../utils/api";
	export default {
		data() {
			return {
				ready: false,
				navColor: '#252F62',
				showtab:false,
				triggered: false,
				styles: {
					backgroundColor: '#f1f1f1',
					borderRadius: '45rpx',
					width: '400rpx'
				},
				listall:[],
				allpageindex:1,
				allmore:true,
				searchstr:''
			}
		},
		onLoad(){
			 this._freshing = false;
		},
		onShow(){
			this.listall=[],
			this.allmore=true
			this.allpageindex=1,
			this.getplanning()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async onRefresh() {
				
			                if (this._freshing) return;
			                this._freshing = true;
							this.listall=[]
							this.allmore=true
							this.allpageindex=1
							var user=(await helper.getUser())
							uni.showLoading()
							var result = await agingApi.gethistoryplan({
							    key: this.searchstr,
								userCode:user.userCode,
							    index: this.allpageindex,
							    pageSize: 5,
							});
							uni.hideLoading()
							if (result) {
								
								if(result.data.items){
									this.listall=this.listall.concat(result.data.items)
								}
							   if(result.data.totalCount>this.listall.length){
								   this.allpageindex+=1
							   }else{
								   this.allmore=false
							   }
							}
			                
			                    this.triggered = false;
			                    this._freshing = false;
			                
			            },
			            onRestore() {
			                this.triggered = 'restore'; // 需要重置
			                console.log("onRestore");
			            },
			detail(id) {
				uni.navigateTo({
					url: '/pages/activityprogress/index?id='+id
				})
			},
			async getplanning() {
				if(!this.allmore)return
				var user=(await helper.getUser())
				uni.showLoading()
				var result = await agingApi.gethistoryplan({
				    key: this.searchstr,
					userCode:user.userCode,
				    index: this.allpageindex,
				    pageSize: 5,
				});
				uni.hideLoading()
				if (result) {
					
					if(result.data.items){
						this.listall=this.listall.concat(result.data.items)
					}
				   if(result.data.totalCount>this.listall.length){
					   this.allpageindex+=1
				   }else{
					   this.allmore=false
				   }
				}
			},
			
		}
	}
</script>

<style lang="scss">
	$nav-height: 60rpx;
	.emptybody{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-top: 240rpx;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		//background: #252F62;
		.head {
			position: absolute;
			top: 0;
			width: 750rpx;
			height: 408rpx;
			background: #252F62;

			.segment {
				position: absolute;
				top: 210rpx;
				width: 100%;
				height: 88rpx;

				border-radius: 24rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.active {
					color: #fff;
					font-weight: 600;
					font-family: PingFang SC, PingFang SC-Semibold;
					font-weight: Semibold;
					text-align: center;
					border-bottom: 4rpx solid #FFFFFF;
				}

				.divide {
					width: 1rpx;
					height: 86rpx;
					border-right: 2rpx solid #E2E2E2;
				}

				.left,
				.right {
					width: 234rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.top {
						font-size: 40rpx;
						font-family: PingFang SC, PingFang SC-Semibold;
						font-weight: Semibold;
						text-align: center;
						color: #fff;
						line-height: 56rpx;
					}
				}
			}

		}
.top{
  	  font-family: PingFangSC, PingFang SC;
  	  font-weight: 400;
  	  font-size: 34rpx;
  	  color: #FFFFFF;
  	  line-height: 48rpx;
  	  text-align: right;
  	  font-style: normal;
  	  display: flex;
  	  justify-content: center;
  	  align-items: center;
  	  width: 100%;
  }

		
		.body {
			position: absolute;
			top: 299rpx;
			width: 750rpx;
			height: calc(100vh - 300rpx);
			background-color: #F8F8F8;
			.icon {
				height: 40rpx;
				width: 40rpx;
			}

			.b_1 {
				width: 750rpx;
				background: #ECEBFB;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 32rpx 24rpx 50rpx 24rpx;
				box-sizing: border-box;
				margin-bottom: -20rpx;

				.tag {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #6052FF;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
					margin: 0 0 24rpx 48rpx;

				}

				.item {
					width: 702rpx;
					height: 140rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					.left {
						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #383838;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-bottom: 8rpx;
						}

						.time {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #383838;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}
					}

					.right {
						.status {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							text-align: center;
							color: #FF2900;
							line-height: 34rpx;
							font-style: normal;
							margin-bottom: 8rpx;
						}

						.btn {
							width: 180rpx;
							height: 60rpx;
							background: #6052FF;
							border-radius: 34rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}

			.b_2 {
				width: 750rpx;
				background: #F8F8F8;
				border-radius: 30rpx 30rpx 0rpx 0rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.item {
					width: 702rpx;
					height: 404rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 2rpx #E2E2E2;
					border-radius: 24rpx;
					padding: 32rpx 24rpx;
					box-sizing: border-box;
					margin-bottom: 24rpx;

					.hd {
						display: flex;
						align-items: center;

						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #383838;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
							margin-right: 16rpx;
						}

						.type {
							width: 172rpx;
							height: 40rpx;
							background: #3CFF41;
							text-align: center;
						}
					}

					.time {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #383838;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
						margin-top: 10rpx;
					}

					.des {
						display: flex;
						align-items: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #383838;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						margin-top: 24rpx;

						text {
							margin-right: 56rpx;
						}

						image {
							margin-right: 16rpx;
						}

					}

					.progress {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						text: {
							margin-right: 24rpx;
						}
					}

					.divide {
						margin-top: 24rpx;
						width: 654rpx;
						height: 2rpx;
						border: 2rpx solid #F8F8F8;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 30rpx;

						.detail {
							width: 176rpx;
							height: 60rpx;
							border-radius: 30rpx;
							border: 2rpx solid #252F62;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #252F62;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}

						.report {
							width: 176rpx;
							height: 60rpx;
							background: #252F62;
							border-radius: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #fff;
							line-height: 40rpx;
							text-align: right;
							font-style: normal;
						}
					}
				}
			}
		}
	.body_no{
		top: 177rpx!important;
		height: calc(100vh - 177rpx)!important;
	}
	}
</style>